import {useEffect} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import Map from "ol/Map"
import {View} from "ol";
import {drawVectorLayer, TdCvaLayer, TdVecLayer} from "@/pages/Mymap/layers";
import {
  editBarControl,
  noteControl,
  overviewMapControl,
  saveControl,
  scaleLineControl,
  tooltipOverlay,
  zoomsliderControl
} from "@/pages/Mymap/controls";
// css less
import "ol/ol.css";
import "./fonts/css/font-awesome.min.css"
import "ol-ext/control/Bar.css";
import "ol-ext/control/Notification.css";
import "ol-ext/control/EditBar.css";
import "ol-ext/overlay/Popup.css";
import "./index.less"



const Index = () => {

  useEffect(() => {

    const map = new Map({
      view: new View({
        projection: 'EPSG:4326',
        center: [113.5, 22.17],
        zoom: 12
      }),
      layers: [TdVecLayer,TdCvaLayer,drawVectorLayer],
      target: 'map'
    });



    map.addControl(overviewMapControl)
    map.addControl(zoomsliderControl)
    map.addControl(scaleLineControl)
    map.addControl(noteControl);
    map.addControl(saveControl)
    map.addControl(editBarControl);
    map.addOverlay(tooltipOverlay);


  },[]);

  return (
    <PageContainer>
      <div id="map" className="map">
      </div>
    </PageContainer>
  );
};

export default Index;




